<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            height: 100%;
        }

        .login {
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #282c34;
        }

        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
            color: #61dafb;
        }

        .container {
            height: 30px;
            width: 250px;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
        }

        input {
            width: 100%;
            height: 100%;
            position: relative;
            outline: none;
            border: none;
            box-sizing: border-box;
            padding-left: 5px;
            background-color: #282c34;
            color: #61dafb;
            caret-color: #61dafb;
        }

        input::placeholder {
            color: #61dafb;
        }

        span {
            position: absolute;
            content: "";
            display: block;
            background-color: #61dafb;
            transition: transform .1s ease-in-out;
        }

        .top,
        .bottom {
            left: 0px;
            right: 0px;
            height: 2px;
        }

        .left,
        .right {
            top: 0px;
            bottom: 0px;
            width: 2px;
            transform: scaleY(0);
        }

        .top {
            top: 0px;
            transform: scaleX(0);
            transform-origin: left center;
            transition-delay: .2s;
        }

        .left {
            left: 0px;
            transform-origin: bottom center;
            transition-delay: .3s;
        }

        .bottom {
            bottom: 0px;
        }

        .right {
            right: 0px;
            transform-origin: top center;
            transition-delay: .1s;
        }

        input:focus ~ .right {
            transform: scaleY(1);
            transform-origin: bottom center;
        }

        input:focus ~ .left {
            transform: scaleY(1);
            transform-origin: top center;
        }

        input:focus ~ .top {
            transform: scaleY(1);
            transform-origin: right center;
        }

        .container1 {
            height: 30px;
            width: 250px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .btn {
            position: absolute;
            left: 50%;
            top: 54%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 5px;
            width: 52%;
            margin-top: 40px;
            background-color: #61dafb;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="login">
    <div class="header">登录</div>
<!--    <form>-->
        <div class="container">
            <input type="text"  id='username' placeholder="请输入用户名" name="username">
            <span class="left"></span>
            <span class="right"></span>
            <span class="top"></span>
            <span class="bottom"></span>
        </div>
        <div class="container1">
            <input type="password" id='password' placeholder="请输入密码" name="password">
            <span class="left"></span>
            <span class="right"></span>
            <span class="top"></span>
            <span class="bottom"></span>
        </div>
        <button type=“button” class="btn" id='btn1'>登录</button>
<!--            <input  class="btn" id="btn1" value="登录">-->

<!--        <div >-->
<!--            <p class="duan" style="background-color:red;height:50px;width:50px;">显示的内容</p>-->
<!--        </div>-->
<!--    </form>-->
</div>


<script src='../static/js/jquery-3.6.0.min.js'></script>
<script type="text/javascript">
    // $(function(){
    //     $('#btn1').click(function(){//点击a标签
    //         if($('#timo').is(':hidden')){//如果当前隐藏
    //             $('#timo').show();//那么就显示div
    //         }else{//否则
    //             $('#timo').hide();//就隐藏div
    //         }
    //     })
    // })

    // $(function(){
    //     $(".btn").click(function(){
    //         $(".duan").show()
    //     })
    // });

    $(function () {
        // 页面加载完成后 代码自动执行
        bindbtn();
    })

    function bindbtn() {
        $('#btn1').click(function () {
            $.ajax({
                url: '/auto_process',
                type: 'POST',
                // dataType:'JSON',
                data: {
                    username : $('#username').val(),
                    password : $('#password').val()
                },
                success:function (res){
                    console.log(res),
                    alert(res.msg)
                }

            })
        })
    }


</script>

</body>
</html>
